<!-- 供货商申请页面 -->
<template>
  <div>
    <base-table ref="table" :search-params="searchParams" :columns="columnsAction" :async-fc="page"> </base-table>
    <t-dialog
      v-model:visible="modalOpen"
      width="45%"
      confirm-btn="通过"
      cancel-btn="驳回"
      @cancel="onModalCancel"
      @confirm="onModalSubmit"
    >
      <t-form ref="submitFormRef" style="width: 100%" :data="submitForm" label-align="top">
        <t-row style="width: 100%" :gutter="[16, 16]">
          <t-col :span="12">
            <t-form-item label="公司名称" name="companyName">
              <t-input v-model="submitForm.companyName" placeholder="请输入公司名称" disabled />
            </t-form-item>
          </t-col>
          <t-col :span="12">
            <t-form-item label="法人姓名" name="legalPerson">
              <t-input v-model="submitForm.legalPerson" placeholder="请输入法人姓名" disabled />
            </t-form-item>
          </t-col>
          <t-col :span="12">
            <t-form-item label="法人身份证" name="idCard">
              <t-input v-model="submitForm.idCard" placeholder="请输入法人身份证" disabled />
            </t-form-item>
          </t-col>
          <t-col :span="12">
            <t-form-item label="联系电话" name="contactPhone">
              <t-input v-model="submitForm.contactPhone" placeholder="请输入联系电话" disabled />
            </t-form-item>
          </t-col>
          <t-col :span="12">
            <t-form-item label="公司地址" name="companyAddress">
              <t-input v-model="submitForm.companyAddress" placeholder="请输入公司地址" disabled />
            </t-form-item>
          </t-col>
          <t-col :span="12">
            <t-form-item label="营业执照" name="businessLicense">
              <t-image :src="submitForm.businessLicense" style="width: 100px"></t-image>
            </t-form-item>
          </t-col>
          <t-col :span="12">
            <t-form-item label="拒绝原因" name="rejectReason">
              <t-textarea v-model="submitForm.rejectReason" />
            </t-form-item>
          </t-col>
        </t-row>
      </t-form>
    </t-dialog>
  </div>
</template>

<script setup lang="ts">
import { FormInstanceFunctions, Image, Link, MessagePlugin, Tag } from 'tdesign-vue-next';
import { computed, ref } from 'vue';

import { auditApi, page } from '@/api/supplier_application';
import baseTable from '@/components/base-table/index.vue';

const submitForm = ref<any>({});
const modalOpen = ref(false);
const submitFormRef = ref<FormInstanceFunctions>(null);
const table = ref<_TableInstanceFunctions>(null);

// 搜索参数
const searchParams = computed(() => [
  {
    key: 'companyName',
    label: '公司名称',
  },
  {
    key: 'legalPerson',
    label: '法人姓名',
  },
  {
    key: 'contactPhone',
    label: '联系电话',
  },
  {
    key: 'status',
    label: '状态',
    valueType: 'select',
    options: [
      { label: '待审核', value: 0 },
      { label: '已通过', value: 1 },
      { label: '已拒绝', value: 2 },
    ],
  },
]);

// 表格列定义
const columns = computed(() => [
  {
    title: '公司名称',
    colKey: 'companyName',
  },
  {
    title: '法人身份证',
    colKey: 'idCard',
    ellipsis: true,
  },
  {
    title: '营业执照',
    colKey: 'businessLicense',
    align: 'center',
    cell: (h, { row }) =>
      h(Image, { src: row.businessLicense, fit: 'contain', style: 'width: 100px; height: 100px;margin: 0 auto' }),
  },
  {
    title: '法人姓名',
    colKey: 'legalPerson',
  },
  {
    title: '联系电话',
    colKey: 'contactPhone',
  },
  {
    title: '状态',
    colKey: 'status',
    align: 'center',
    cell: (h, { row }) => {
      const statusMap = {
        0: { text: '待审核', theme: 'warning' },
        1: { text: '已通过', theme: 'success' },
        2: { text: '已拒绝', theme: 'danger' },
      };
      const status = statusMap[row.status];
      return h(Tag, { theme: status.theme }, () => status.text);
    },
  },
]);

// 表格列定义（带操作列）
const columnsAction = computed(() =>
  columns.value.concat([
    {
      align: 'center',
      colKey: 'op',
      title: '操作',
      cell: (h, { row }) =>
        h(
          Link,
          {
            theme: 'primary',
            onClick: () => {
              submitForm.value = row;
              if (row.status !== 0) {
                MessagePlugin.error('该申请已处理，请勿重复操作!');
                return;
              }
              modalOpen.value = true;
            },
          },
          () => '审核',
        ),
    },
  ]),
);

const onModalCancel = async () => {
  if (!submitForm.value.rejectReason) {
    MessagePlugin.warning('请填写拒绝原因');
    return;
  }
  const params = {
    id: submitForm.value.id,
    status: 2,
    rejectReason: submitForm.value.rejectReason,
  };
  await auditApi(params);
  modalOpen.value = false;
  submitForm.value = {};
  table.value.onSearch();
};
const onModalSubmit = async () => {
  const params = {
    id: submitForm.value.id,
    status: 1,
    rejectReason: submitForm.value.rejectReason,
  };
  await auditApi(params);
  modalOpen.value = false;
  submitForm.value = {};
  table.value.onSearch();
};
</script>

<style lang="less" scoped>
:deep(.t-button) {
  min-width: 88px;
}

:deep(.t-dialog) {
  .t-dialog__body {
    max-height: calc(90vh - 200px);
    overflow-y: auto;
  }

  .t-form {
    .t-form__item {
      padding: 0 0 24px 0;
      margin-bottom: 0;

      &:last-child {
        padding-bottom: 0;
      }
    }
  }
}

:deep(.t-tag) {
  width: 68px;
  justify-content: center;

  &.t-tag--warning {
    background: rgba(255, 170, 0, 0.1);
    color: #ed7b2f;
  }

  &.t-tag--success {
    background: rgba(0, 168, 112, 0.1);
    color: #00a870;
  }

  &.t-tag--danger {
    background: rgba(227, 77, 89, 0.1);
    color: #e34d59;
  }
}
</style>
